<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* https://blog.csdn.net/u011684839/article/details/89474415 */
        /* flex布局 */
        body{
            display:flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .header{
            background-color: #f00;
            height: 20px;
        }
        /* .main{
            background-color: violet;
            flex:1
        } */
        .main {
            flex: 1 0 auto;
        }
        /* main {
                flex-grow: 1; 容器有剩余空间时，main区域会扩展
                flex-shrink: 0; 容器有不足空间时，main区域不会收缩
                flex-basis: auto; main区域高度的基准值为main内容自动高度
            } */
        .footer {
            height: 60px;
            margin-top:auto;
            background-color: #0f0;
        }
    </style>
</head>
<body>
    <!-- 什么是stickyFooter布局
        手机页面中，当内容高度撑不满一屏时，
    页脚紧贴屏幕底部；当内容高度超过一屏时，页脚紧随其后。 
        页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。
-->
    <!-- HTML -->
        <!-- <header></header>
        <main></main>
        <footer></footer> -->
        <div class="header">
            header
        </div>
        <div class="main">
           main
            <div style="height:200px;">dsfasd</div> 
        </div>
        <div class="footer">
            footer
        </div>
</body>
</html>